<template>
  <!-- 
  目标: 组件默认插槽的使用 让封装的组件根据需求显示不同的标签结构
  1. 不确定有什么东西的内容用 slot 标签占位
  2. 使用子组件时 在父组件的内容会 传入具体的标签 会直接覆盖 slot 标签
  3. <slot></slot>内放置内容就是默认内容 不传具体标签 就渲染默认内容
  -->

  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <!-- 里面的内容并不会被渲染 -->
        <img src="https://img.alicdn.com/imgextra/i4/O1CN01HGhduk1a3XUaa2jbf_!!6000000003274-2-tps-198-200.png" alt="" />
        <span>我被替换了</span>
      </Pannel>

      <Pannel>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "../components/02/Pannel.vue";
export default {
  components: {
    Pannel,
  },
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>